<template>
  <div>Home</div>
  <span>setup组件的计算属性中的totalPrice : {{ totalPrice }}</span>
  <br />
  <span>$store的getter方法 : {{ $store.getters.StoreTotalPrice }}</span>
  <br>
  <span>$store的getter方法 : {{ $store.getters.StoreTotalPrice }}</span>
  <br />
  <span>opations的计算属性TotalPrice : {{ $store.getters.StoreTotalPriceDiscount(0.1) }}</span>
</template>

<script>
import useMapStatetoSetup from '../hooks/useMapStatetoSetup'
import { computed } from 'vue'
export default {
  setup() {
    const totalPrice = computed(() => {
      const { books } = useMapStatetoSetup(['books'])
      return books.value.reduce((pre, { price, count }) => {
        return pre + price * count
      }, 0)
    })
    return {
      totalPrice,
    }
  },
}
</script>

<style lang="scss" scoped></style>
